<template>
  <div class="bg">
    <nav-com
      :title="$t('rilititle')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <van-tabs v-model="active" sticky offset-top="13.33vw" color="#00DEA1" title-active-color="#00DEA1" :border="true" class="m-t-16">
      <van-tab :title="$t('qixinglulxian')">
        <div class="top-view1">
          <!--          滑动-->
          <div class="swiper-rong">
            <div  class="swiper-rong-neibu">
              <div v-for="(item, index) in swiperData" :key="index" class="swiper-items" :width="330">
                <div class="swiper-item-flex">
                  <div class="swiper-item-left">
                    <div class="swiper-name">
                      奥森南园澳海环路
                    </div>
                    <div class="swiper-subname">全长4.55英里</div>
                    <div class="btns">公园</div>
                  </div>
                  <img v-lazy="item"  class="swiper-item-right"/>
                </div>
              </div>
            </div>
          </div>
          <!-- 两端对齐 -->
          <van-cell-group inset class="m-b-10 m-t-10 teshu">
            <van-cell inset >
              <van-row class="item-content">
                <van-col span="24" class="qixingtitle">{{ $t('qixingshuju') }}</van-col>
              </van-row>
            </van-cell>
            <div class="group-item">
              <div class="group-item-content-teshu">
                <div class="group-item-content-flex">
                  <div>26.4km</div>
                  <div class="group-item-content-flex-shuliang">
                    <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
                    <div>{{ $t('licheng') }}</div>
                  </div>

                </div>
                <div class="group-item-content-flex">
                  <div>03:19:15</div>
                  <div class="group-item-content-flex-shuliang">
                    <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
                    <div>{{ $t('shichang') }}</div>
                  </div>

                </div>
                <div class="group-item-content-flex">
                  <div>3.3kg</div>
                  <div class="group-item-content-flex-shuliang">
                    <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
                    <div>{{ $t('cishu') }}</div>
                  </div>
                </div>
<!--                <div  class="group-item-content-flex">-->
<!--                  <div>264kcal</div>-->
<!--                  <div class="group-item-content-flex-shuliang">-->
<!--                    <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
<!--                    <div>{{ $t('kaluli') }}</div>-->
<!--                  </div>-->

<!--                </div>-->
              </div>
            </div>
          </van-cell-group>
          <!-- 两端对齐 -->
          <van-cell-group inset class="m-b-10 m-t-10 teshu">
            <van-cell inset is-link >
              <van-row class="item-content">
                <van-col span="8">2022.09.23</van-col>
                <van-col span="14">
                  08:30:40～09:12:40
                </van-col>
              </van-row>
            </van-cell>
            <div class="group-item">
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('qidian') }}:</div>
                </div>
                <div class="group-item-right">
                  深圳市福田区上梅林卓越城二期B 座南区
                </div>
              </div>
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu36@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('zhongdian') }}:</div>
                </div>
                <div class="group-item-right">
                  上海市青浦区黄埔卓越城
                </div>
              </div>
              <div class="group-item-content">
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
                  <div>26.4km</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
                  <div>12:30:08</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
                  <div>3次</div>
                </div>
<!--                <div  class="group-item-content-flex">-->
<!--                  <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
<!--                  <div>26kcal</div>-->
<!--                </div>-->
              </div>
            </div>
          </van-cell-group>
          <van-cell-group inset class="m-b-10 m-t-10 teshu">
            <van-cell inset is-link >
              <van-row class="item-content">
                <van-col span="8">2022.09.23</van-col>
                <van-col span="14">
                  08:30:40～09:12:40
                </van-col>
              </van-row>
            </van-cell>
            <div class="group-item">
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('qidian') }}:</div>
                </div>
                <div class="group-item-right">
                  深圳市福田区上梅林卓越城二期B 座南区
                </div>
              </div>
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu36@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('zhongdian') }}:</div>
                </div>
                <div class="group-item-right">
                  上海市青浦区黄埔卓越城
                </div>
              </div>
              <div class="group-item-content">
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
                  <div>26.4km</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
                  <div>12:30:08</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
                  <div>3次</div>
                </div>
<!--                <div  class="group-item-content-flex">-->
<!--                  <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
<!--                  <div>26kcal</div>-->
<!--                </div>-->
              </div>
            </div>
          </van-cell-group>
        </div>
      </van-tab>
      <van-tab :title="$t('rilititle')">
        <div class="top-view1">
          <!--          滑动-->
          <div class="swiper-rong">
            <div  class="swiper-rong-neibu">
              <div class="swiper-items-rili" @click="showrili=true">
                <div class="swiper-item-flex">
                  <div class="swiper-item-left">
                    <van-cell-group inset class="m-b-10 m-t-10 teshu">
                      <van-cell inset >
                        <van-row class="item-content" align="center">
                          <van-col span="22" class="qixingtitlerili">
                            <span>
                              {{ $t('riqi') }}
                            </span>
                            <span>:</span>
                            <span>{{date}}</span>
                          </van-col>
                          <van-icon span="2"  name="notes-o" size="30" class="swiper-item-right swiper-item-rili"/>
                        </van-row>
                      </van-cell>
                    </van-cell-group>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 两端对齐 -->
          <van-cell-group inset class="m-b-10 m-t-10 teshu">
            <van-cell inset >
              <van-row class="item-content">
                <van-col span="24" class="qixingtitle">{{ $t('qixingshuju') }}</van-col>
              </van-row>
            </van-cell>
            <div class="group-item">
              <div class="group-item-content-teshu">
                <div class="group-item-content-flex">
                  <div>26.4km</div>
                  <div class="group-item-content-flex-shuliang">
                    <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
                    <div>{{ $t('licheng') }}</div>
                  </div>

                </div>
                <div class="group-item-content-flex">
                  <div>03:19:15</div>
                  <div class="group-item-content-flex-shuliang">
                    <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
                    <div>{{ $t('shichang') }}</div>
                  </div>

                </div>
                <div class="group-item-content-flex">
                  <div>3.3kg</div>
                  <div class="group-item-content-flex-shuliang">
                    <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
                    <div>{{ $t('cishu') }}</div>
                  </div>
                </div>
<!--                <div  class="group-item-content-flex">-->
<!--                  <div>264kcal</div>-->
<!--                  <div class="group-item-content-flex-shuliang">-->
<!--                    <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
<!--                    <div>{{ $t('kaluli') }}</div>-->
<!--                  </div>-->

<!--                </div>-->
              </div>
            </div>
          </van-cell-group>
          <!-- 两端对齐 -->
          <van-cell-group inset class="m-b-10 m-t-10 teshu">
            <van-cell inset is-link >
              <van-row class="item-content">
                <van-col span="8">2022.09.23</van-col>
                <van-col span="14">
                  08:30:40～09:12:40
                </van-col>
              </van-row>
            </van-cell>
            <div class="group-item">
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('qidian') }}:</div>
                </div>
                <div class="group-item-right">
                  深圳市福田区上梅林卓越城二期B 座南区
                </div>
              </div>
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu36@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('zhongdian') }}:</div>
                </div>
                <div class="group-item-right">
                  上海市青浦区黄埔卓越城
                </div>
              </div>
              <div class="group-item-content">
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
                  <div>26.4km</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
                  <div>12:30:08</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
                  <div>3次</div>
                </div>
<!--                <div  class="group-item-content-flex">-->
<!--                  <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
<!--                  <div>26kcal</div>-->
<!--                </div>-->
              </div>
            </div>
          </van-cell-group>
          <van-cell-group inset class="m-b-10 m-t-10 teshu">
            <van-cell inset is-link >
              <van-row class="item-content">
                <van-col span="8">2022.09.23</van-col>
                <van-col span="14">
                  08:30:40～09:12:40
                </van-col>
              </van-row>
            </van-cell>
            <div class="group-item">
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('qidian') }}:</div>
                </div>
                <div class="group-item-right">
                  深圳市福田区上梅林卓越城二期B 座南区
                </div>
              </div>
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu36@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('zhongdian') }}:</div>
                </div>
                <div class="group-item-right">
                  上海市青浦区黄埔卓越城
                </div>
              </div>
              <div class="group-item-content">
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
                  <div>26.4km</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
                  <div>12:30:08</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
                  <div>3次</div>
                </div>
<!--                <div  class="group-item-content-flex">-->
<!--                  <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
<!--                  <div>26kcal</div>-->
<!--                </div>-->
              </div>
            </div>
          </van-cell-group>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup
      round
      v-model="showrili"
      position="center"
      :style="{ height: '50%','z-index':'10000000' }"
      class="z-index1000"
    >
      <div class="rili-content">
        <ri-li @clickCurrentDay="clickCurrentDay"></ri-li>
      </div>
    </van-popup>
    <van-icon v-show="showrili" name="close" class="closed-icon" color="#fafafa" size="34" @click="showrili=false"/>
  </div>
</template>
<script>
import { Toast } from 'vant';
import navCom from "@/components/nav-com.vue";
import riLi from "@/components/rili.vue";
import {
  returnData,
} from '@/utils/day.js'
export default {
  name: "bonusList",
  components: {
    navCom,
    riLi
  },
  data() {
    return {
      date:returnData(new Date()),
      showrili:false,
      active:0,
      searchValue:'',
      checked:true,
      showView: true,
      title: "骑行日历",
      showPage:true,
      lichengValue:"",
      swiperData: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    clickCurrentDay(date){
      console.log("========date",date)
      this.date = date.data;
      this.showrili = false;
    },
    jumpTo(url){
      this.$router.push(url)
    },
    onPageConfirm(){

    },
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    clearHistory(){
      this.$toast('清理缓存成功');
    },
    //初始化
    init() {

    },
    onSearch(){

    }
  },
};
</script>
<style lang="scss" scoped>
.m-t-16{
  margin-top: 13.33vw;
}
.bg{
  background: #F8F8F8;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.teshu{
}
.search_btn{
  width: 56px;
  background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-search__action{
  padding: 0;
}
.van-search{
  padding: 0;
}
.top-title{
  color: #fff;
  .title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
  }
  .sub-title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-top: 10px;
  }
  .right-img{
    width: 135px;
  }
}
.wenti{
  font-size: 22px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303030;
  margin: 0px 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  padding: 10px 0 15px;
}
.group-item{
  display: flex;
  flex-direction: column;
  padding:0 15px 15px;
  .group-item-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 10px;
    &:first-child{
      padding: 10px 0;
    }
    .group-item-left{
      display: flex;
      align-items: center;
      div{
        display: flex;
        align-items: center;
      }
      img{
        width: 15px;
        margin-right: 10px;
      }
      .management_name{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #303030;
      }
    }
    .group-item-right{
      display: flex;
      justify-content: flex-start;
      width: 77%;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303030;
    }
  }
  .group-item-content{
    border-top: 0.02667rem solid #ebedf0;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .group-item-content-flex{
      display: flex;
      align-items: center;
      .icon-small{
        width: 15px;
        margin-right: 4px;
      }
      div{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
      }
    }
    .group-item-content-right{
      text-align: right;
    }
  }
  .group-item-content-teshu{
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .group-item-content-flex{
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      div{
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
      .group-item-content-flex-shuliang{
        padding-top: 5px;
        display: flex;
        align-items: center;
        .icon-small{
          width: 15px;
          margin-right: 4px;
        }
        div{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #808080;
        }
      }
    }
    .group-item-content-right{
      text-align: right;
    }
  }
}
.item-content{
  width: 100%;
  display: flex;
  align-items: center;
}
.van-search__content {
  background-color: #EEEEEE;
}
::v-deep .van-tabs__nav{
  border-bottom: 1px solid #fafafa!important;
  border-top: 1px solid #fafafa!important;
}
::v-deep .van-tabs__line {
  bottom: 0.6rem;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 1.333rem;
}
.swiper-rong{
  width: 100vw;
  overflow-x: scroll;
  .swiper-rong-neibu{
    white-space: nowrap;
    .rili-content{
      width: 90vw;
      height: 50vh;
      background: #fff;
    }
    .swiper-items{
      display: inline-block;
      width: 264px;
      height: 110px;
      margin:10px 20px 10px 0;
      padding: 10px;
      background: #fff;
      border-radius: 6px;
      box-shadow: 0px 0px 6px 0px rgba(63,156,148,0.3);
      &:first-child{
        margin-left:20px;
      }
      .swiper-item-flex{
        display: flex;
        .swiper-item-left{
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          .swiper-name{
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #0AD39F;
          }
          .swiper-subname{
            font-size: 16px;
            font-family: Helvetica;
            color: #303030;
          }
          .btns{
            background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
            box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
            border-radius: 6px;
            color: #ffffff;
            font-size: 18px;
            padding: 6px 17px;
          }
        }
        .swiper-item-right{
          width: 110px;
          height: 110px;
          font-size: 30px!important;
        }
      }
    }
    .swiper-items-rili{

    }
  }
}
.qixingtitle{
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303030;
}
.qixingtitlerili{
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 500;
  color: #303030;
  display: flex;
  align-items: center;
  height: 100%;
}
.closed-icon{
  position: fixed;
  bottom: 3rem;
  left: 45%;
  z-index: 1005001;
  font-size: 34px!important;
}
::v-deep .van-tab{
  font-size: 16px;
}
.z-index1000{
  z-index: 1000000!important;
}
::v-deep .van-overlay{
  z-index: 999999!important;
}
.swiper-item-rili{
  font-size: 34px!important;
}
</style>
